<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面向对象之烟花完善</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 700px;
            height: 500px;
            border: 1px solid red;
            background: #000;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }
        .ball{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            position: absolute;
            bottom: 0;
        }
    </style>
    
</head>
<body>
    <div id="box"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        /* 
        
            设计分析：
                * 点击盒子
                * 生成烟花
                * 烟花移动
                * 隐藏
                * 爆炸
                * 自动播放

        */

        // 构造函数
        function Firework(elem_selector){
            this.box = document.querySelector(elem_selector);
            
            this.bindEvent();
            // this.autoplay();
        }

        // 原型对象
        Firework.prototype.bindEvent = function(){
            let self = this;
            
            self.box.onclick = function(e){
                let fw = self.createFw();
                fw.style.left = e.offsetX + 'px';
                $(fw).animate({
                    top:e.offsetY
                },function(){
                    fw.remove();
                    // 移除烟花后，创建烟花群
                    self.boom(e.offsetX,e.offsetY);
                });
            }
            
        }
        Firework.prototype.createFw = function(){
            let self = this;

            let span = document.createElement('div');
            self.box.appendChild(span);

            span.className = 'ball';
            span.style.background = '#' + Math.round(parseInt('ffffff',16) * Math.random()).toString(16).padStart(6,'0');

            return span
        }
        // 爆炸
        Firework.prototype.boom = function(x,y){
            // 初始化角度、半径
            var self = this;
            var deg = 0;
            var r = 100;

            // for循环创建20个烟花
            for(var i=0;i<20;i++){
                var span = self.createFw();
                // 定位
                span.style.left = x + 'px';
                span.style.top = y + 'px';

                deg += 18;

                // 三角函数设置目标值
                var target_x = Math.round(Math.cos(Math.PI/180*deg)*r);
                var target_y = Math.round(Math.sin(Math.PI/180*deg)*r);

                // 运动后移除
                $(span).animate({
                    left:target_x + x,
                    top:target_y + y
                },function(){
                    // 因为闭包的缘故，每次生成的span都会被前一个覆盖，所以直接用span.remove()这里的span是指覆盖后的第20个，且在JQ中，这里的this指向当前DOM对象
                    this.remove(); 
                })  
            }   
        }

        // 自动播放
        Firework.prototype.autoplay = function(){
            var self = this;
            setInterval(function(){
                self.box.onclick({
                    offsetX:Math.round(Math.random()*self.box.offsetWidth),
                    offsetY:Math.round(Math.random()*self.box.offsetHeight),
                });
            },500)
        }

        // 实例对象
        let fw = new Firework('#box');
        
    </script>
</body>
</html>